<template>
<div>
    <!-- 轮播图区域 -->
    <mt-swipe :auto="1000">
        <!-- <mt-swipe-item>1</mt-swipe-item>
        <mt-swipe-item>2</mt-swipe-item>
        <mt-swipe-item>3</mt-swipe-item> -->

        <!-- 组件中 v-for 循环, 一定要使用key -->
        <mt-swipe-item v-for="item in lunbotuList" :key="item.img">
            <img v-bind:src="item.img" alt="">
        </mt-swipe-item>
    </mt-swipe>

    <!-- 六宫格区域 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <a href="#">
                <img src="./../../images/menu1.png" alt="">
                <div class="mui-media-body">新闻资讯</div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <a href="#">
                <img src="./../../images/menu2.png" alt="">
                <div class="mui-media-body">图片分享</div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <a href="#">
                <img src="./../../images/menu3.png" alt="">
                <div class="mui-media-body">商品购买</div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <a href="#">
                <img src="./../../images/menu4.png" alt="">
                <div class="mui-media-body">留言反馈</div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <a href="#">
                <img src="./../../images/menu5.png" alt="">
                <div class="mui-media-body">视频专区</div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <a href="#">
                <img src="./../../images/menu6.png" alt="">
                <div class="mui-media-body">联系我们</div>
            </a>
        </li>
    </ul>

</div>
</template>

<script>
// 导入 mint-ui 中的 Toast 弹框组件
import {
    Toast
} from 'mint-ui'


// 为组件指定默认输出的内容, 这样外部引用的组件的时候就可以使用此处输出的内容
// 外部在import引用组件时, 就是在为这个输出内容命名
export default {
    data() {
        return {
            lunbotuList: [{
                    url: 'http://www.itcast.cn/subject/phoneweb/index.html',
                    img: 'http://ofv795nmp.bkt.clouddn.com/vuelogobanner1.jpg'
                },
                {
                    url: 'http://www.itcast.cn/subject/phoneweb/index.html',
                    img: 'http://ofv795nmp.bkt.clouddn.com/vuelogobanner2-1.jpg'
                }
            ], //保存轮播图数组
        }
    },
    created() {
        this.getLunbotu()
    },
    methods: {
        getLunbotu() { // 获取轮播图数据的方法
            this.$http.get('http://vue.studyit.io/api/getlunbo', {
                // params: {},
                // headers: {}
            }).then(res => {
                // console.log(res)
                if (res.body.status === 0) {
                    this.lunbotuList = res.body.message
                } else {
                    Toast("获取录播图失败")
                }
            }, error => {
                console.log('网络请求失败: ' + error)
                // Toast("网络请求失败")
            })
        }
    }
}
</script>

<style lang="scss" scoped>
// 设置轮播图容器高度, 图片大小
.mint-swipe {
    height: 200px;
    // .mint-swipe-item:nth-child(1) {
    //     background-color: red;
    // }
    .mint-swipe-item {
        // &:nth-child(1) {
        //     background-color: red;
        // }
        // &:nth-child(2) {
        //     background-color: blue;
        // }
        // &:nth-child(3) {
        //     background-color: cyan;
        // }
        img {
            width: 100%;
            height: 100%;
        }
    }
}

// 更改六宫格的背景颜色, 图片大小, 文字大小
.mui-grid-view.mui-grid-9 {
    background-color: #fff;
    img {
        width: 60px;
        height: 60px;
    }
    .mui-media-body {
        font-size: 13px;
    }
}

// 去掉六宫格的边框
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border: 0;
}
</style>

